import { useState, useEffect } from "react";
import data from "./position";
const App = function () {
  //省,市,县
  const [A, setA] = useState("");
  const [B, setB] = useState("");
  const [C, setC] = useState("");
  const setState = ({ target }) => {
    console.log(target.name);
    console.log(target.value);
    //eval把字符串转变成js代码
    eval(`set${target.name}`)(target.value);
  };
  const [shop, setShop] = useState([
    { checked: false, name: "苹果", count: 100, money: 10 },
    { checked: false, name: "香蕉", count: 50, money: 2 },
    { checked: false, name: "西瓜", count: 20, money: 15 },
    { checked: false, name: "哈密瓜", count: 30, money: 30 },
  ]);
  const [checkAll, setCheckAll] = useState(false);
  //设置购物车数据
  const set = ({ target }) => {
    const { name, value, checked, dataset } = target;
    let list = [...shop];
    console.log(name);
    console.log(value);
    console.log(checked);
    console.log(dataset);
    if (name === "checked") {
      list[value].checked = checked;
    } else {
      list[dataset.index][name] = Number(value);
    }
    setShop(list);
  };
  //操作全选
  const setCheck_All = async (state) => {
    let list = [...shop].map((item) => {
      item.checked = state;
      return item;
    });
    setShop(list);
    setCheckAll(state);
  };
  const [$, set$] = useState(0);
  useEffect(() => {
    setCheckAll(shop.every((item) => item.checked));
    const a = shop.filter((item = item.checked)).reduce((a, b) => {
      return a + b.count * b.money;
    }, 0);
    set$(a);
  }, [shop]);
  //删除一条
  const del = (index) => {
    let list = [...shop];
    list.splice(index, 1);
    setShop(list);
  };
  //监听数据

  return (
    <div>
      {/* 三级联动 */}
      <select value={A} onChange={setState} name="A">
        <option value="">请渲染</option>
        {data.map((item) => {
          return (
            <option value={item.label} key={item.value}>
              {item.label}
            </option>
          );
        })}
      </select>
      <select name="B" value={B} onChange={setState}>
        <option value="">请渲染</option>
        {data
          .find((item) => item.value === A)
          ?.children.map((item) => {
            return (
              <option value={item.value} key={item.label}>
                {item.label}
              </option>
            );
          })}
      </select>
      <select name="C" value={C} onChange={setState}>
        <option value="">请渲染</option>
        {data
          .find((item) => item.value === A)
          ?.children.find((item) => item.value === B)
          ?.children.map((item) => {
            return (
              <option value={item.value} key={item.label}>
                {item.label}
              </option>
            );
          })}
      </select>
      {/* 购物车 :的数据是通过shopId请求后台得到的一个数组结构的数据*/}
      <table border="1">
        <thead>
          <tr>
            <th>
              全选:{" "}
              <input
                type="checkbox"
                checked={checkAll}
                onChange={() => setCheck_All(!checkAll)}
              />
            </th>
            <th>名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {shop.map((item, index) => {
            return (
              <tr key={item.name}>
                <td>
                  <input
                    type="checkbox"
                    value={index}
                    checked={item.checked}
                    onChange={set}
                    name="checked"
                  />
                </td>
                <td>{item.name}</td>
                <td>
                  <button
                    name="count"
                    value={item.count - 1}
                    data-index={index}
                    onClick={set}
                  >
                    -
                  </button>
                  {item.count}
                  <button
                    name="count"
                    value={item.count + 1}
                    data-index={index}
                    onClick={set}
                  >
                    +
                  </button>
                </td>
                <td>{item.money}</td>
                <td>{item.money * item.count}</td>
                <td>
                  <button onClick={() => del(index)}>删除</button>
                </td>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan="3">
              <button>删除所选</button>
            </td>
            <td colSpan="3">
              <span>总金额:{$}</span>
              <button>结算</button>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
};

export default App;
